<?php
$data = $this->data;
$filePath = $this->filePath;
$hinhAnh = $data['hinhAnh'];
$hinhAnh = explode('|', $hinhAnh);
unset($hinhAnh[count($hinhAnh)-1]);
$imgLink = '/files/'.$data['loaiHang'].'/'.$data['maHang'].'/';
?>
<div class="row" style="margin: 20px 0px 20px 0px;">
	<div class="col-md-6 item-image" style="padding:0px; border:1px solid #ddd; margin:0px; height:320px; overflow:hidden; background-color:#EEEEE5;" id="mainImg">
	<center>
		<?php
		$counter = 0;
		foreach ($hinhAnh as $ha) {
			if($counter==0)
				echo '<img onerror="imgError(this)" max-height="100%" max-width="100%" style="border:none;" src="'.$imgLink.$ha.'"/>';
			else
				echo '<img onerror="imgError(this)" max-height="100%" max-width="100%" style="border:none;" src="'.$imgLink.$ha.'" style="display:none;"/>';
			$counter = 1;
		}
		?>
	</center>
	</div>
	<div class="col-md-6 item-info" style="padding:0px; text-align:right;">
		<div style="width:98%; border:1px solid #ddd; height:320px; padding: 20px; margin-left:2%; position:relative;">
		<?php
		echo '<h2 style="margin:0px; color:#428bca;">'.$data['ten'].'</h2>';	echo '<br/>';
		echo '<h3 style="margin:0px; color:#755;">Giá :'.$data['gia'].'</h3>';	echo '<br/>';
		echo '<p style="font-size:14pt;">'.$data['moTa'].'</p>';	echo '<br/>';
		?>
		<table style="width:100%; position:absolute; bottom:10px; border-top:1px solid #bbb;">
			<tr>
				<?php
				$counter = 0;
				foreach ($hinhAnh as $ha) {
					$counter++;
					$temp = $imgLink.$ha;
					echo '<td><img id="listed-img" onerror="imgError(this)" onclick="changeImg('.$counter.')" class="img-thumb" height="auto" width="100%" src="'.$temp.'"/></td>';
				}

				?>

			</tr>
		</table>
		</div>
	</div>
	<div class="col-md-8" style="padding:10px 0px 10px 0px; border:1px solid #ddd; margin-top:20px;">
		<div id="chitiet" style="text-indent:10px;">
			<h4>Chi tiet san pham</h4>
		</div>
		<center>
			<?php
			foreach ($hinhAnh as $ha) {
					echo '<img width="90%" height="auto" style="margin:10px 0px 10px 0px;" style="border:none;" src="'.$imgLink.$ha.'"/>';
			}
			?>
		</center>
	</div>
	<div class="col-md-4 item-info" style="padding:0px; margin-top:20px; text-align:right;">
		<div style="width:98%; height:320px;padding: 20px; margin-left:2%; position:relative;">
		<h3>Các mặt hàng cùng loại</h3>
		<ul>
			<li>Sản phẩm 1</li>
			<li>Sản phẩm 2</li>
			<li>Sản phẩm 3</li>
			<li>Sản phẩm 4</li>
			<li>Sản phẩm 5</li>
		</ul>
		</div>
	</div>
</div>

<style>
.img-thumb{
	height: 60px;
	width: auto;
}

.item-info table{
	border-collapse: separate;
}

.item-info td{
	width: 50px !important;
	height: 50px !important;
	padding: 5px 0px 5px 0px;
	border-collapse: separate;
	border: 1px solid white;
	text-align: center;
}
.item-info td img{
	border: 1px solid #ddd !important;
	border: 1px solid white;
}
.item-info td img:hover{
	border: 1px solid #0099FF !important;
	cursor: pointer;
}
</style>
<script>
	var availableImg = 0;
	var hinhAnh = new Array();
	<?php
	$counter = 0;
	foreach ($hinhAnh as $x) {
		echo 'hinhAnh['.$counter.'] = "'.$x.'";';
		$counter++;
	}
	?>
	imgSrc = <?php echo "'$imgLink'"; ?>;
	var height = $('.item-image').height();
	var z = $('.item-image img');
	z.height(height);
	function changeImg(x){
		var images = $('#mainImg img');
		var oldImg = $(images[availableImg]);
		var newImg = $(images[x-1]);
		oldImg.css('display','none');
		newImg.css('display','');
		availableImg = x-1;
	}
</script>